<template>

  <div class="home_container">

    <header class="headerTitle">页面载入状态及UA</header>
    
    <div class="uaContainer" v-html="ua + '<br/>' + 'document.readyState:' + domReadyState">
    </div>

    <pluginCollectionView v-for="(item, index) in dataSource"
            :key="index"
            :item="item"
            :sectionIndex=index 
            :selectIndexPath="selectIndexPath"
            @updateSelectIndex="handleUpdateSelectIndex">
    </pluginCollectionView>

  </div>
</template>

<script>

import Accordion from "./view/dsbridgePluginItemCell.vue"

import pluginCollectionView from "./view/dsbridgeCollectionView.vue";

export default {
	name: 'home',
  	components: {
        Accordion,
        pluginCollectionView
  	},
    created(){
        console.log('created');
    },
    mounted(){
        console.log('mounted');
    },
    methods : {
        handleUpdateSelectIndex(indexPath) {
            this.selectIndexPath = indexPath
        }
    },
    data() {
        return {
            selectIndexPath: {
               type: Object,
                default() {
                  return {};
                }
            },

            ua: window.navigator.userAgent,
            domReadyState: window.document.readyState,
            sectionHeadTitle : 'dsbridge基础插件',
            dataSource : [ 
            {
              'header': 'DSBridge基础插件' ,
              'sectionItemConfig' : [
                {
                    "area":"DSBridge数据存储插件",
                    "pluginName":"dataStorage",
                    "child":[
                        {'name':'添加或更新数据',
                        'method':'addOrUpdateData',
                        "defaultCallFuncStr":"UniqueJSBridge.call('dataStorage.addOrUpdateData', \n{type: 'common',data: {'a':'123'}},\n function success(result){console.log(result);});",},
                        {'name':'移除数据',
                        'method':'removeData',
                        'defaultCallFuncStr':"UniqueJSBridge.call('dataStorage.removeData', \n{type:'common','key':'a'}, \nfunction success(result) {console.log(result);});"},
                        {'name':'获取数据',
                        'method':'getData',
                        'defaultCallFuncStr':"UniqueJSBridge.call('dataStorage.getData', \n{type:'common','key':'a'}, \nfunction success(result) {console.log(result);});"},
                ]},
                {
                    "area":"设备信息插件",
                    "pluginName":"device",
                    "child":[
                        {'name':'获取设备信息',
                        'method':'getDeviceInfo',
                        'defaultCallFuncStr':"UniqueJSBridge.call('device.getDeviceInfo', \n{}, \nfunction success(result) {console.log(result);});"},
                        {'name':'判断是否安装app',
                        'method':"phoneIsExistApp",
                        'defaultCallFuncStr':"UniqueJSBridge.call('device.phoneIsExistApp', \n{'appNames':['weixin','ailpay']}, \nfunction success(result) {console.log(result);});"},
                        {'name':'获取定位信息',
                        'method':'getLocation',
                        'defaultCallFuncStr':"UniqueJSBridge.call('device.getLocation', \n{}, \nfunction success(result) {console.log(result);});"},
                        {'name':'扫码',
                        'method':'scan',
                        'defaultCallFuncStr':"window.UniqueJSBridge.call('device.scan',\n{'imageType':'http',\n'imageData':'https://imgcdn.chuxingyouhui.com/knc/pro/mng/20210520/9b3bb99983074d5cb46db90a7420d880.jpeg'},\n(rsp)=>{console.log(rsp)});"}
                ]},
                {
                    "area":"权限插件",
                    "pluginName":"permission",
                    "child":[
                        {'name':'查看授权状态',
                        'method':'native_hasPermissions',
                        'defaultCallFuncStr':"UniqueJSBridge.call('permission.native_hasPermissions', \n{'permissions':['Location','Photo','Microphone','Camera','Push','Media']}, \nfunction success(result) {console.log(result);});"},
                        {'name':'请求授权',
                        'method':"native_requestPermissions",
                        'defaultCallFuncStr':"UniqueJSBridge.call('permission.native_requestPermissions', \n{'permission':'Camera'}, \nfunction success(result) {console.log(result);});"},
                        {'name':'跳转设置页面',
                        'method':'settings',
                        'defaultCallFuncStr':"UniqueJSBridge.call('permission.settings', \n{}, \nfunction success(result) {console.log(result);});"},
                        
                ]},
                {
                  "area":"页面导航插件",
                    "pluginName":"jump",
                    "child":[
                        {'name':'返回tab一级界面',
                        'method':'backToTab',
                        'defaultCallFuncStr':"UniqueJSBridge.call('jump.backToTab', \n{'tabIndex':'1'}, \nfunction success(result) {console.log(result);});"},
                        {'name':'新开页面',
                        'method':"openWindow",
                        'defaultCallFuncStr':"UniqueJSBridge.call('jump.openWindow', \n{'url':'https://www.baidu.com'}, \nfunction success(result) {console.log(result);});"},
                        {'name':'推出控制器',
                        'method':'popWindow',
                        'defaultCallFuncStr':"UniqueJSBridge.call('jump.popWindow', \n{'animation':false}, \nfunction success(result) {console.log(result);});"},
                        {'name':'跳到指定原生控制器',
                        'method':'popTo',
                        'defaultCallFuncStr':"UniqueJSBridge.call('jump.popTo', \n{'animation':false,'index':1,'jsFunName':''}, \nfunction success(result) {console.log(result);});"}
                ]},
                 {
                  "area":"App信息相关",
                    "pluginName":"app",
                    "child":[
                        {'name':'获取app版本信息',
                        'method':'web_getAppVersion',
                        'defaultCallFuncStr':"UniqueJSBridge.call('app.web_getAppVersion', \n{}, \nfunction success(result) {console.log(result);});"},
                        {'name':'读取剪贴板内容',
                        'method':"getNativeClipboardText",
                        'defaultCallFuncStr':"UniqueJSBridge.call('app.getNativeClipboardText', \n{}, \nfunction success(result) {console.log(result);});"},
                        {'name':'设置剪贴板内容',
                        'method':'setNativeClipboardText',
                        'defaultCallFuncStr':"UniqueJSBridge.call('app.setNativeClipboardText', \n{'text':'设置剪贴板内容'}, \nfunction success(result) {console.log(result);});"},
                        {'name':'设置状态栏颜色',
                        'method':'web_setStatusBarStyle',
                        'defaultCallFuncStr':"UniqueJSBridge.call('app.web_setStatusBarStyle', \n{'style':'dark'}, \nfunction success(result) {console.log(result);});"},
                        {'name':'设置标题',
                        'method':'setTitle',
                        'defaultCallFuncStr':"UniqueJSBridge.call('app.setTitle', \n{'title':'设置标题'}, \nfunction success(result) {console.log(result);});"},
                        {'name':'标题设置右边的按钮属性',
                        'method':'setOptionMenu',
                        'defaultCallFuncStr':"UniqueJSBridge.call('app.setOptionMenu', \n{'btnLists':[{'icon':'http://t14.baidu.com/it/u=2967276152,771148871&fm=224&app=112&f=JPEG?w=100&h=100&s=A392652374B4D382AF5988D60000C0A2','text':'扫一扫','color':'#333333'},{icon:'saoyisao','text':'扫一扫',color:'#666666'}]}, \nfunction success(result) {console.log(result);});"},
                        {'name':'显示系统导航栏右侧按钮',
                        'method':'showOptionMenu',
                        'defaultCallFuncStr':"UniqueJSBridge.call('app.showOptionMenu', \n{}, \nfunction success(result) {console.log(result);});"},
                        {'name':'隐藏系统导航栏右侧按钮',
                        'method':'hideOptionMenu',
                        'defaultCallFuncStr':"UniqueJSBridge.call('app.hideOptionMenu', \n{}, \nfunction success(result) {console.log(result);});"},
                        {'name':'自定义导航栏右侧按钮单个',
                        'method':'web_setNavigationRightBarButton',
                        'defaultCallFuncStr':"UniqueJSBridge.call('app.web_setNavigationRightBarButton', \n{'text':'右侧按钮'}, \nfunction success(result) {console.log(result);});"},
                        {'name':'自定义右侧导航按钮点击事件',
                        'method':'rightBarButtonClickAction',
                        'defaultCallFuncStr':"UniqueJSBridge.call('app.rightBarButtonClickAction', \n{}, \nfunction success(result) {console.log(result);});"},
                        {'name':'退出应用',
                        'method':'exitApp',
                        'defaultCallFuncStr':"UniqueJSBridge.call('app.exitApp', \n{}, \nfunction success(result) {console.log(result);});"},
                        {'name':'系统浏览器打开',
                        'method':'browserOpen',
                        'defaultCallFuncStr':"UniqueJSBridge.call('app.browserOpen', \n{'url':'https://www.baidu.com'}, \nfunction success(result) {console.log(result);});"},
                        {'name':'自定义界面背景颜色',
                        'method':'set_navbarBackGroundColor',
                        'defaultCallFuncStr':"UniqueJSBridge.call('app.set_navbarBackGroundColor', \n{'color':'#666666'}, \nfunction success(result) {console.log(result);});"},
                        {'name':'webview是否支持bounces',
                        'method':'set_scrollBounces',
                        'defaultCallFuncStr':"UniqueJSBridge.call('app.set_scrollBounces', \n{'bounces':'0'}, \nfunction success(result) {console.log(result);});"},
                ]}
            ]
        }, 
        {
          'header':'盲盒业务插件',
          'sectionItemConfig':[
                  {
                    "area":"获取用户信息插件",
                    "pluginName":"userState",
                    "child":[
                        {'name':'添加或更新数据',
                        'method':'getUserData',
                        "defaultCallFuncStr":"UniqueJSBridge.call('userState.getUserData', \n{},\n function success(result){console.log(result);});",},
                        {'name':'balanceChange',
                        'method':'balanceChange',
                        'defaultCallFuncStr':"UniqueJSBridge.call('userState.balanceChange', \n{}, \nfunction success(result) {console.log(result);});"},
                        {'name':'拉起登录插件',
                        'method':'login',
                        'defaultCallFuncStr':"UniqueJSBridge.call('userState.login', \n{doPre:'clearUserStatus',}, \nfunction success(result) {console.log(result);});"},
                        {'name':'登出插件',
                        'method':'logout',
                        'defaultCallFuncStr':"UniqueJSBridge.call('userState.logout', \n{}, \nfunction success(result) {console.log(result);});"},
                ]},
                   {
                    "area":"safari插件",
                    "pluginName":"safari",
                    "child":[
                        {'name':'内置safariVC打开',
                        'method':'openBySafari',
                        "defaultCallFuncStr":"UniqueJSBridge.call('safari.openBySafari', \n{'url':'https://www.baidu.com'},\n function success(result){console.log(result);});",}
                ]},
                {
                    "area":"支付插件",
                    "pluginName":"pay",
                    "child":[
                        {'name':'原生支付',
                        'method':'nativePay',
                        "defaultCallFuncStr":"UniqueJSBridge.call('pay.nativePay', \n{'url':'参数自填'},\n function success(result){console.log(result);});",}
                ]}
              ]}    
           ]
        }
    } 
}
</script>

<style lang="less" scoped>
.home_container {
  display: flex;
  flex-direction: column;
  width: 100vw;
}

.headerTitle {
  text-align: center;
  color: 0x333333;
  font: 14px medium;
  margin-top: 15px;
}

.uaContainer {
  margin: 0 1em;
  font-size: 13px;
  word-wrap: break-word;
  border: 1px mediumseagreen solid;
  line-height: 24px;
}

.vuexClass{
  height: 88px;
  background-color:blanchedalmond;
  margin-top: 20px;
}
</style>
